<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            background-color: #f2f4f8;
        }

        * {
            box-sizing: border-box;
        }

        .box {
            width: 1000px;
            margin: 0 auto;
        }

        .form {
            padding: 50px 20px;
            width: 600px;
            margin: 0 auto;
        }

        input {
            width: 100%;
            border: none;
            outline: none;
            padding: 16px 20px;
            border-radius: 8px;
            background-color: #ffffff;
        }

        .row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .row>img {
            margin-left: 12px;
            flex-shrink: 0;
            border-radius: 8px;
            overflow: hidden;
        }

        .code {
            margin-left: 20px;
            border: none;
            outline: none;
            padding: 16px 30px;
            background-color: green;
            color: #ffffff;
            border-radius: 8px;
            white-space: nowrap;
            cursor: pointer;
        }

        button {
            min-width: 300px;
            border: none;
            outline: none;
            padding: 16px 30px;
            background-color: green;
            color: #ffffff;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="form">
            <h1>注册</h1>
            <input id="phone" type="text" placeholder="请输入账号"><br /><br />
            <input id="password" type="password" placeholder="请输入密码"><br /><br />
            <div class="row">
                <input id="code_value" type="text" placeholder="请输入验证码">
                <div id="code" class="code">获取验证码</div>
            </div>
            <br />
            <button id="submit">提交</button><br />
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function () {
            var captcha_id;

            // 获取短信验证码
            function fetchCode() {
                var phone = $("#phone").val();
                if (phone.length !== 11) {
                    alert("手机号码格式错误！")
                    return;
                }
                $.ajax({
                    url: "/api/common/getCode?type=register&phone=" + phone,
                    method: "GET",
                    success: function (res) {
                        console.log("验证码:", res);
                        if (res.code === 0) {
                            alert("发送成功！")
                        } else {
                            alert("发送失败：" + res.msg);
                        }
                    }
                })
            };
            $("#code").on("click", fetchCode);

            $("#submit").on("click", function () {
                $.ajax({
                    url: "/api/user/register",
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    data: JSON.stringify({
                        phone: $("#phone").val(),
                        password: $("#password").val(),
                        code: $("#code_value").val(),
                    }),
                    success: function (res) {
                        console.log('注册结果：', res);
                        alert(res.msg);
                    }
                })
            })
        })
    </script>
</body>

</html>